<template>
    <span class="relative t-left">
      <i class="iconfont icon-lishi pointer" :class="{topHover: isShowRecording}" @click="getHistoryProjects"></i>
      <div class="top-time-com top-time-com1" v-show="isShowRecording" @mouseleave="isShowRecording = false">
        <p class="top-time-title">历史记录</p>
        <div class="top-time-content">
          <div class="top-recording clear" v-for="item in recording">
            <p class="left top-recording-name" :title="item.name" @click="enterHistoryProjects(item)">{{item.projectTitle}}</p>
            <p class="right" >{{item.time}}</p>
          </div>
        </div>
      </div>
    </span>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'zz-history',
    data () {
      return {
        isShowRecording: false,
        recording: []
      }
    },
    props: {
      isAi: [String, Number]
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    methods: {
      getHistoryProjects () {
        this.isShowRecording = !this.isShowRecording
        if (this.isShowRecording) {
          const data = {
            'userMid': this.currentUser.mid,
            'isAi': this.isAi
          }
          this.$axios({
            method: 'post',
            closeLoading: true,
            url: `${this.$site.videoServer}/api/userRecord/getHistoryProjects`,
            data: this.$qs.stringify(data)
          }).then(res => {
            this.recording = res.data.data
            this.recording.reverse()
          })
        }
      },
      enterHistoryProjects (item) {
        this.$emit('choose', item)
      }
    }
  }
</script>
